<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Loading</title>
<style>
@keyframes animate {
  0% {
    background-position: 50%; }
  8.33333% {
    background-position: 40% 50%, 50%, 50%, 50%, 50%, 50%, 50%, 50%; }
  16.66667% {
    background-position: 40% 50%, 43% 43%, 50%, 50%, 50%, 50%, 50%, 50%; }
  25% {
    background-position: 40% 50%, 43% 43%, 50% 40%, 50%, 50%, 50%, 50%, 50%; }
  33.33333% {
    background-position: 40% 50%, 43% 43%, 50% 40%, 57% 43%, 50%, 50%, 50%, 50%; }
  41.66667% {
    background-position: 40% 50%, 43% 43%, 50% 40%, 57% 43%, 60% 50%, 50%, 50%, 50%; }
  50% {
    background-position: 40% 50%, 43% 43%, 50% 40%, 57% 43%, 60% 50%, 57% 57%, 50%, 50%; }
  58.33333% {
    background-position: 40% 50%, 43% 43%, 50% 40%, 57% 43%, 60% 50%, 57% 57%, 50% 60%, 50%; }
  66.66667% {
    background-position: 40% 50%, 43% 43%, 50% 40%, 57% 43%, 60% 50%, 57% 57%, 50% 60%, 43% 57%; }
  100% {
    background-position: 40% 50%, 43% 43%, 50% 40%, 57% 43%, 60% 50%, 57% 57%, 50% 60%, 43% 57%; } }
body,
html {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-itrems: center; }

html {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(243, 243, 243, 0.9), rgba(243, 243, 243, 0.9));
  background-color: #f3f3f3;
  background-size: cover;
  background-blend-mode: normal, luminosity;
  mix-blend-mode: multiply; }

.dot-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  overflow: hidden;
  animation: rotate 6s linear infinite; }

.dots {
  width: 950px;
  height: 950px;
  --pos: 50% 50%;
  --gradient: radial-gradient(black 67%, transparent 68%);
  background: linear-gradient(#14fff4, #ef00ff);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }
  .dots:after {
    margin: 0;
    height: 100%;
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 0 2rem #fff;
    background: var(--gradient), var(--gradient), var(--gradient), var(--gradient), var(--gradient), var(--gradient), var(--gradient), var(--gradient) #fff;
    background-size: 2.5rem 2.5rem, 3rem 3rem;
    background-position: 50%;
    background-repeat: no-repeat;
    filter: blur(8px) contrast(9);
    mix-blend-mode: lighten;
    animation: animate 4s cubic-bezier(0.38, -0.08, 0.42, 2.04) alternate infinite;
    transform: translateZ(0);
    content: ""; }

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg); }
  to {
    transform: translate(-50%, -50%) rotate(360deg); } }

</style>
</head>
<body>
    <div class='dot-container'>
        <div class='dots'>
        </div>
    </div>
</body>
</html>